<!--http://konvajs-doc.bluehymn.com/docs/sandbox/Wheel_of_Fortune.html-->
<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@4.0.18/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Wheel of Fortune Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth
      var height = window.innerHeight

      Konva.angleDeg = false
      var angularVelocity = 6
      var angularVelocities = []
      var lastRotation = 0
      var controlled = false
      var numWedges = 25
      var angularFriction = 0.2
      var target, activeWedge, stage, layer, wheel, pointer
      var finished = false

      function getAverageAngularVelocity() {
        var total = 0
        var len = angularVelocities.length

        if (len === 0) {
          return 0
        }

        for (var n = 0; n < len; n++) {
          total += angularVelocities[n]
        }

        return total / len
      }

      function purifyColor(color) {
        var randIndex = Math.round(Math.random() * 3)
        color[randIndex] = 0
        return color
      }

      function getRandomColor() {
        var r = 100 + Math.round(Math.random() * 55)
        var g = 100 + Math.round(Math.random() * 55)
        var b = 100 + Math.round(Math.random() * 55)
        return purifyColor([r, g, b])
      }

      function getRandomReward() {
        var mainDigit = Math.round(Math.random() * 9)
        return mainDigit + '\n0\n0'
      }

      function addWedge(n) {
        var s = getRandomColor()
        var reward = getRandomReward()
        var r = s[0]
        var g = s[1]
        var b = s[2]
        var angle = (2 * Math.PI) / numWedges

        var endColor = 'rgb(' + r + ',' + g + ',' + b + ')'
        r += 100
        g += 100
        b += 100

        var startColor = 'rgb(' + r + ',' + g + ',' + b + ')'

        var wedge = new Konva.Group({
          rotation: (2 * n * Math.PI) / numWedges,
        })

        var wedgeBackground = new Konva.Wedge({
          radius: 400,
          angle: angle,
          fillRadialGradientStartPoint: 0,
          fillRadialGradientStartRadius: 0,
          fillRadialGradientEndPoint: 0,
          fillRadialGradientEndRadius: 400,
          fillRadialGradientColorStops: [0, startColor, 1, endColor],
          fill: '#64e9f8',
          fillPriority: 'radial-gradient',
          stroke: '#ccc',
          strokeWidth: 2,
        })

        wedge.add(wedgeBackground)

        var text = new Konva.Text({
          text: reward,
          fontFamily: 'Calibri',
          fontSize: 50,
          fill: 'white',
          align: 'center',
          stroke: 'yellow',
          strokeWidth: 1,
          rotation: (Math.PI + angle) / 2,
          x: 380,
          y: 30,
          listening: false,
        })

        wedge.add(text)
        text.cache()

        wedge.startRotation = wedge.rotation()

        wheel.add(wedge)
      }

      function animate(frame) {
        // handle wheel spin
        var angularVelocityChange =
          (angularVelocity * frame.timeDiff * (1 - angularFriction)) / 1000
        angularVelocity -= angularVelocityChange

        // activate / deactivate wedges based on point intersection
        var shape = stage.getIntersection({
          x: stage.width() / 2,
          y: 100,
        })

        if (controlled) {
          if (angularVelocities.length > 10) {
            angularVelocities.shift()
          }

          angularVelocities.push(
            ((wheel.rotation() - lastRotation) * 1000) / frame.timeDiff
          )
        } else {
          var diff = (frame.timeDiff * angularVelocity) / 1000
          if (diff > 0.0001) {
            wheel.rotate(diff)
          } else if (!finished && !controlled) {
            if (shape) {
              var text = shape.getParent().findOne('Text').text()
              var price = text.split('\n').join('')
              alert('You price is ' + price)
            }
            finished = true
          }
        }
        lastRotation = wheel.rotation()

        if (shape) {
          if (shape && (!activeWedge || shape._id !== activeWedge._id)) {
            pointer.y(20)

            new Konva.Tween({
              node: pointer,
              duration: 0.3,
              y: 30,
              easing: Konva.Easings.ElasticEaseOut,
            }).play()

            if (activeWedge) {
              activeWedge.fillPriority('radial-gradient')
            }
            shape.fillPriority('fill')
            activeWedge = shape
          }
        }
      }

      function init() {
        stage = new Konva.Stage({
          container: 'container',
          width: width,
          height: height,
        })
        layer = new Konva.Layer()
        wheel = new Konva.Group({
          x: stage.width() / 2,
          y: 410,
        })

        for (var n = 0; n < numWedges; n++) {
          addWedge(n)
        }
        pointer = new Konva.Wedge({
          fillRadialGradientStartPoint: 0,
          fillRadialGradientStartRadius: 0,
          fillRadialGradientEndPoint: 0,
          fillRadialGradientEndRadius: 30,
          fillRadialGradientColorStops: [0, 'white', 1, 'red'],
          stroke: 'white',
          strokeWidth: 2,
          lineJoin: 'round',
          angle: 1,
          radius: 30,
          x: stage.width() / 2,
          y: 33,
          rotation: -90,
          shadowColor: 'black',
          shadowOffsetX: 3,
          shadowOffsetY: 3,
          shadowBlur: 2,
          shadowOpacity: 0.5,
        })

        // add components to the stage
        layer.add(wheel)
        layer.add(pointer)
        stage.add(layer)

        // bind events
        wheel.on('mousedown touchstart', function (evt) {
          angularVelocity = 0
          controlled = true
          target = evt.target
          finished = false
        })
        // add listeners to container
        stage.addEventListener(
          'mouseup touchend',
          function () {
            controlled = false
            angularVelocity = getAverageAngularVelocity() * 5

            if (angularVelocity > 20) {
              angularVelocity = 20
            } else if (angularVelocity < -20) {
              angularVelocity = -20
            }

            angularVelocities = []
          },
          false
        )

        stage.addEventListener(
          'mousemove touchmove',
          function (evt) {
            var mousePos = stage.getPointerPosition()
            if (controlled && mousePos && target) {
              var x = mousePos.x - wheel.getX()
              var y = mousePos.y - wheel.getY()
              var atan = Math.atan(y / x)
              var rotation = x >= 0 ? atan : atan + Math.PI
              var targetGroup = target.getParent()

              wheel.rotation(
                rotation - targetGroup.startRotation - target.angle() / 2
              )
            }
          },
          false
        )

        var anim = new Konva.Animation(animate, layer)

        // wait one second and then spin the wheel
        setTimeout(function () {
          anim.start()
        }, 1000)
        console.log(stage.toJSON())
      }

      init()
    </script>
  </body>
</html>
